
<style scoped lang="stylus" type="text/stylus">
  .PolicyParticularsShellBox {
    height : 100%;

    /* *固定栏 */
    .lookFundTitle {
      width : 100%;
      height : 40px;
      background-color : #666666;
      color : white;
      font-size : 16px;
      line-height : 40px;
      text-align : center;
      border-bottom : 1px solid black;
    }

    /* *政策详情 */
    .lookFundInfo {
      width : 100%;
      height : calc(100% - 60px);
      background-color : white;
      color : black;
      padding : 60px 0;
      .lookFundInfoContent {
        width : 700px
        margin 0 auto
      }
      .LongTitle {
        font-size : 25px;
        font-weight : 600;
      }

      .ShortTitle {
        font-size : 20px;
        font-weight : 600;
      }

      .fundIntroduce {
        font-size : 16px;
        margin-top : 20px;
      }

      .fundListNumber-ul {
        margin-top : 35px;

        .fundListNumber {
          margin-bottom : 15px;

          .fundListNumber-title {
            font-size : 16px;
            font-weight : 600;
          }

          .fundListNumber-describe {
            font-size : 16px;
            margin-top : 5px;
            margin-bottom : 5px;
          }

          .fundListNumber-way {
            font-size : 18px;
            font-weight : 600;
            color : skyblue;
          }
        }
      }

      .richText {
        .richTextList {
          > li {
            font-size : 14px;
            line-height : 28px;
            padding-left : 20px;
          }

          .isTitle {
            font-size : 16px;
            font-weight : bold;
            padding-left : 0;
            margin : 20px 0;
          }
        }
      }

      .LookMyApplyButton {
        width : 250px;
        height : 40px;
        border-radius : 30px;
        line-height : 40px;
        font-size : 16px;
        color : white;
        text-align : center;
        background-color : pink;
        margin-left : calc(50% - 125px);
        cursor : pointer;
      }
    }
  }
</style>

<template>
  <div class="PolicyParticularsShellBox">
    <div class="lookFundTitle">{{policyData.shortTitle}}</div>
    <VuePerfectScrollbar class="lookFundInfo">
      <div class="lookFundInfoContent">
        <div class="LongTitle">{{policyData.shortTitle}}</div>
        <div class="ShortTitle">{{policyData.longTitle}}</div>
        <div class="fundIntroduce">{{policyData.spirit}}</div>
        <ul class="fundListNumber-ul">
          <li class="fundListNumber" v-for="(fundList, fundIndex) in policyData.prizes" :key="fundIndex">
            <p class="fundListNumber-title">{{fundList.title}}</p>
            <p class="fundListNumber-describe">{{fundList.description}}</p>
            <p class="fundListNumber-way">{{fundList.maxPrize}}</p>
          </li>
        </ul>
        <div class="richText" id="quillEditor">
          <ul class="richTextList">
            <li :class="{'isTitle':item.type == 'C'}" v-for="item in policyData.document" :key="item.id">
              <div class="ql-editor" v-html="item.title"></div>
            </li>
          </ul>
        </div>
        <div class="LookMyApplyButton" @click="deletePolicy">下架政策</div>
      </div>
    </VuePerfectScrollbar>
  </div>
</template>

<script>
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";

  export default {
    name    : "policyDetail",
    data() {
      return {
        policyData: [] //每个资助的详情
      };
    },
    computed: {
      userMsg() {
        return this.$store.state.userMsg;
      },
      applyStatus() {
        if (this.$store.state.applyStatus && this.$store.state.applyStatus.id) {
          return this.$store.state.applyStatus;
        } else {
          return null;
        }
      }
    },
    methods : {
      // 判断用户是否登录，如果登录则可通过当前路由传进的参数id去获取政策详情？？？
      hasApply() {
        this.$store.commit("setApplyStatus", null);
        if (this.userMsg) {
          this.ajaxData(
            {
              type: "get",
              url : "/policy/apply",
              data: {
                policyId: this.$route.params.fundListId
              }
            },
            res => {
              this.$store.commit("setApplyStatus", res);
            }
          );
        }
      },
      // 获取政策详情信息
      getPolicyData() {
        this.ajaxData(
          {
            url : `/policy?policyId=${this.$route.params.fundListId}`,
            type: "get",
            data: {}
          },
          res => {
            this.policyData = res;
          }
        );
      },
      // 根据申请id跳转到对应的申请详情页
      /*
      goToComponent(applyId) {
        this.$router.push({
          name : "editApplication",
          query: {
            policyId: this.$route.params.fundListId,
            applyId : applyId,
            name    : this.$route.name
          }
        });
      },
      */
      // 下架政策
      deletePolicy() {
        this.ajaxData(
          {
            type: "post",
            url : "/policy/unpublish",
            data: {
              policyId: this.$route.params.fundListId
            }
          },
          res => {
            this.$router.push({
              name: "onlinePolicy"
            });
          }
        );
      }
    },
    created() {
      this.getPolicyData();
      this.hasApply();
    },
    mounted() {},
    watch   : {
      userMsg(v) {
        this.hasApply();
      }
    }
  };
</script>
